<template>
    <view class="page">
        <view class="step">
            <view class="step-items">
                <view class="step-items1">1</view>
                <view class="step-items1-name">购买套餐</view>
            </view>
            <view class="step-items">
                <view class="step-items2">2</view>
                <view class="step-items1-name">实名激活</view>
            </view>
        </view>
		<view class="list-items" v-for="item in dataList" :key="item.id">
		    <view class="top">
		        <view class="top-left">{{ item.packageName ? item.packageName : item.name }}</view>
		        <view class="top-right">券后<text>¥
					 {{ (item.salePriceRmb ? item.salePriceRmb : item.salePrice / 100 ) - (result.price*1) > 0 ? ((item.salePriceRmb ? item.salePriceRmb : item.salePrice / 100 ) - (result.price*1)).toFixed(2) : 0 }}
				</text></view>
		    </view>
		    <view class="middle">
		        <view class="top-left">基础包</view>
		        <view class="top-right">原价 {{ item.salePriceRmb ? item.salePriceRmb : item.salePrice / 100 }}</view>
		    </view>
		    <view class="bottom">
		        <view class="top-left">{{item.startTime}} 至 {{ item.endTime }}</view>
		        <view class="top-right">
		            <u-button type="primary" block color="#397EF5" @click="sumbit(item)">立即购买</u-button>
		        </view>
		    </view>
		</view>
        <view class="list-items">
            <view class="title">温馨提示</view>
            <view class="content">您正在使用的卡为预充值卡，预充值卡流量更多，价格更优惠。</view>
            <view class="content" style="padding-bottom:48upx;">预充值卡系统自动订购每期流量套餐，请确保余额充足。</view>
        </view>
    </view>
</template>

<script>
	export default{
		data(){
			return{
				dataList:[],
				result:{}
			}
		},
		created() {
			//页面初始化
			this.init()
		},
		methods:{
			init(){
				var params = {
					iccid: uni.getStorageSync('iccid') || '',
					firstPkg:'1'
				}
				this.$api.soldPkg(params).then(res=>{
					this.dataList = res.data.list
					this.result = res.data.subJuan
					this.result.isAdmin = res.data.isAdmin
				})
			},
			sumbit(data){
				var params = {
					...data,
					isAdmin:this.result.isAdmin,
					price:this.result.price || 0
				}
				if (this.result.types === 1) {
					params.secondaryId = this.result.id
				} else {
					params.primaryId = this.result.id
				}
				uni.navigateTo({
					url:'/pages/order/index?params='+ encodeURIComponent(JSON.stringify(params))
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.page{
    padding-top:32upx;
    background: #F4F6FA;
    height: calc(100vh - 32upx);
    .step{
        width:70%;
        margin:0 auto;
        display: flex;
        position: relative;
        justify-content:space-between;
        margin-bottom:44upx;
        &::after{
            display: block;
            content: '';
            height:2upx;
            width:80%;
            border-top:2upx dashed #979797;
            position: absolute;
            top:32upx;
            left:68upx;
            z-index: 0;
        }
        .step-items{
            position: relative;
            z-index: 1;
        }
        .step-items1,.step-items2{
            width: 66upx;
            height: 66upx;
            border-radius:100%;
            text-align: center;
            line-height:66upx;
            color: #fff;
            margin:0 auto;
            background: #397EF5;
        }
        .step-items2{
            background: #A8B5CA; 
        }
        .step-items1-name{
            height: 22upx;
            font-size: 30upx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #000000;
            line-height: 22upx;
            margin-top:20upx;
        }
    }
    .list-items{
        width:90%;
        margin: 0 auto 20upx;
        border-radius: 20upx;
        background:#fff;
        .title{
            padding:30upx;
            font-size: 28upx;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #28292D;
        }
        .content{
            padding:0 28upx;
            font-size: 24upx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #63666D;
            line-height: 34upx;
            text-indent: 48upx;
        }
    }
    .top{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding:24upx 26upx 12upx 28upx;
        .top-left{
            height: 50upx;
            font-size: 36upx;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #28292D;
            line-height: 50upx;
        }
        .top-right{
           color: #FF8017;
           font-size:28upx;
           text{
            font-size: 36upx;
            padding-left:8upx;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
           } 
        }
    }
    .middle{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding:0px 26upx 34upx 28upx;
        .top-left{
            font-size: 24upx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #28292D;
            width: 118upx;
            padding:8upx 0;
            padding-left:24upx;
            text-align: center;
            background: #E3EDFF url('./../../static/img/icon14.png') no-repeat 6upx center;
            background-size: 24upx 24upx;
            border-radius: 4upx;

        }
        .top-right{
            font-size: 28upx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #C4C4C4;
            line-height: 40upx; 
            text-decoration: line-through;
        }
    }
    .bottom{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding:0px 26upx 28upx 28upx;
        .top-left{
            font-size: 24upx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #28292D;
            padding:12upx;
            padding-left:40upx;
            text-align: center;
            background: #FFF4EB url('./../../static/img/icon13.png') no-repeat 6upx center;
            background-size: 24upx 24upx;
            border-radius: 4upx;
			flex: 1.1;
        }
        .top-right{
            width: 360upx;
            font-size: 28upx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #C4C4C4;
            line-height: 40upx; 
			flex: 1;
            .u-button{
                height:64upx;
				width:200upx;
            }
        }
    }
}
</style>